<template>
  <div class="back">
  <div class="artitem" v-for="(post, index) in item" :key="post.postId">
    <div class="header">
        <img :src=post.postAvatar>
        <span class="name">{{ post.postNickname }}</span>
        <van-button type="info" class="bt" @click="navigateToPinglun(index)">搭饭</van-button>
    </div>
    <div class="middle">
        <h2>{{ post.postTitle }}</h2> <br>
        <span>{{ post.postContent }} <br>  <img  :src="post.postPicture" :key="post.postId" /></span>
        <p>{{ post.postTime }}</p>
    </div>
  </div>
</div>
</template>

<script>
//导入混入方法
import loginConfirm from '@/mixins/loginConfirm'
export default {
  mixins: [loginConfirm],
  data() {
    return {
      // imgList:[
      // ]
      //后期把假数据换成接口数据，为item.postPicture
    }
  },
  props: {
    item: {
      type: Array,
      default: () => {
        return {}
      },
    }
  },
  created(){
    console.log(this.item);
  },
  methods:{
     navigateToPinglun(index) {
    if (this.loginConfirm()) {
    return
  }
      const param1 = this.item[index].postId;
      const param2 = this.item[index].postUid;
      console.log(param1,param2);
      this.$router.push(`/pinglun/${param1}/${param2}`);
    }
  }
}
</script>

<style lang="less" scoped>
.back{
  background-color: #f7f8fa;
}
.van-nav-bar{
  .van-icon{
    color: black;
  }
} 
.van-nav-bar__text{
  color: black;
}
 .artitem{
  margin-top: 10px;
  margin-left: 12px;
    display: flex;
    flex-direction: column;
    width: 95%;
   
    border-radius: 10px;
    background-color: white;
    hr{
        
        width: 90%;
        margin-top: 10px;
        margin-left: 20px;
    }
 }
 .header{
    width: 100%;
    img{
        width: 40px;
        height: 40px;
        border-radius: 40px;
        margin-left: 10px;
        margin-bottom: -10px;
    }
    .name{
        font-size: 17px;
        position: relative;
        left: 5%;
    }
    .bt{
      font-size: 2.66667vw;
    height: 8vw;
    left: 79%;
    display: block;
    /* margin-left: 67px; */
    position: relative;
    margin-top: -6.66667vw;
    border-radius: 2.66667vw;
    }
  
 }
 .middle{
    width: 100%;
    h2{
       margin-left: 35px;
       margin-top: 15px;
    }
    span{
        margin-left: 35px;
        font-size: 15px;
        display: inline-block;
        width: 240px;
        word-break: break-all;
    }
    p{
        margin-left: 285px;
        font-size: 14px;
        overflow: hidden;
    }
    img{
      width: 50px;
      height: 50px;
      margin-left: 3px;
    width: 17.33333vw;
    height: 16.33333vw;
    border-radius: 10px;
    }
 }

</style>